<template>
    <div class="component-time-picker1">
        <div class="all-btn btn btn-blue btn-mobile btn-small" @click="onClickAll">所有</div>
        <wx-picker mode="date" :value="startDate" start="2020-01-01" :end="nowDate" @change="onStartDateChange">
            <div class="picker-border-box fl">
                {{startDate || '选择日期'}}
            </div>
        </wx-picker>
        <div class="line-23">-</div>
        <wx-picker mode="date" :value="endDate" :start="startDate" :end="nowDate" @change="onEndDateChange">
            <div class="picker-border-box fl">
                {{endDate || '选择日期'}}
            </div>
        </wx-picker>
        <div class="all-btn btn btn-blue btn-mobile btn-small" @click="onClickSearch">筛选</div>
    </div>
</template>

<script lang="ts">
import { dateFormat } from '@/lib/utils';

import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'TimePicker',
})
export default class TimePicker extends Vue {
    @Prop({}) public defaultStartDate: any;

    public nowDate: any = dateFormat(new Date());
    public startDate: string | null = null;
    public endDate: string | null = null;

    @Watch('defaultStartDate')
    public onDefaultStartDateChange() {
        this.startDate = this.defaultStartDate;
    }

    public onStartDateChange(picker: any) {
        this.startDate = picker.target.value;
    }

    public onEndDateChange(picker: any) {
        this.endDate = picker.target.value;
    }

    public onClickAll() {
        this.startDate = null;
        this.endDate = null;
        this.onClickSearch();
    }

    public onClickSearch() {
        this.$emit('search', {
            startDate: this.startDate,
            endDate: this.endDate,
        });
    }

    public created() {
        this.startDate = this.defaultStartDate;
        this.endDate = null;
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.component-time-picker1 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1;
    .picker-border-box {
        padding: 12rpx 10rpx;
        font-size: 24rpx;
        line-height: 18rpx;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
        text-align: center;
        border: 2rpx solid rgba(217, 217, 217, 1);
    }
    .line-23 {
        line-height: 46rpx;
    }
}
</style>
